<template>
  <view>
    <view class="list-container">
      <!-- 复查时间 -->
      <view v-for="(item, index) in newData" :key="index">
        <view class="item" v-if="item.lawType == 40">
          <view class="top-label" @click="retract(index)">
            <view>复查信息</view>
            <view v-if="item.show"><uv-icon name="arrow-down" size="40rpx" color="rgba(0, 0, 0, 0.4)"></uv-icon></view>
            <view v-else><uv-icon name="arrow-right" size="40rpx" color="rgba(0, 0, 0, 0.4)"></uv-icon></view>
          </view>
          <view v-if="item.show">
            <view class="item-child">
              <view class="info">
                <view class="row">
                  <view class="title">复查结果:</view>
                  <view class="con">{{ item.lawFlag == 0 ?'复查不通过':'复查通过'}}</view>
                </view>
                <view class="row" v-if="item.lawFlag == 0">
                  <view class="title">复查意见:</view>
                  <view class="con">{{ item.reason}}</view>
                </view>
                <view class="row">
                  <view class="title">复查时间:</view>
                  <view class="con">{{item.lawDate}}</view>
                </view>
                <view class="row">
                  <view class="title">复查人:</view>
                  <view class="con">{{item.userName}}</view>
                </view>
              </view>
            </view>
            <view class="item-child">
              <view class="top-label">
                <view>复查照片</view>
              </view>
              <view class="info">
                <view class="img-all">
                  <fileUpload :tableId="item.id" tableName="sup_law_item" type="review" :watermarkFlag="true"
                              :maxCount="0" :deletable="false" width="72" height="72"/>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="item" v-if="item.lawType == 20">
          <view class="top-label"  @click="retract(index)">
            <view>整改完成时间</view>
            <view class="text-right">{{item.lawDate}}</view>
            <view v-if="item.show"><uv-icon name="arrow-down" size="40rpx" color="rgba(0, 0, 0, 0.4)"></uv-icon></view>
            <view v-else><uv-icon name="arrow-right" size="40rpx" color="rgba(0, 0, 0, 0.4)"></uv-icon></view>
          </view>
          <view v-if="item.show">
            <!-- 整改后照片 -->
            <view class="item-child">
              <view class="top-label">
                <view>整改后照片</view>
              </view>
              <view class="info">
                <view class="img-all">
                  <fileUpload :tableId="item.id" tableName="sup_law_item" type="rectify" :watermarkFlag="true"
                              :maxCount="0" :deletable="false" width="72" height="72"/>
                </view>
              </view>
            </view>
            <!-- 整改报告单 -->
            <view class="item-child">
              <view class="top-label">
                <view>整改报告单</view>
              </view>
              <view class="info">
                <view class="img-all">
                  <fileUpload :tableId="item.id" tableName="sup_law_item" type="rectifyReport" :watermarkFlag="true"
                              :maxCount="0" :deletable="false" width="72" height="72"/>
                </view>
              </view>
            </view>
            <!-- 整改内容 -->
            <view class="item-child">
              <view class="top-label">
                <view>整改内容</view>
              </view>
              <view class="content-item" style="margin-left: 10rpx">{{item.rectificationContent||'--'}}</view>
            </view>
            <!-- 审核信息 -->
            <view class="item-child" v-if="null != item.lawItem">
              <view class="top-label">
                <view>审核信息</view>
              </view>
              <view class="info">
                <view class="row">
                  <view class="title">审核结果:</view>
                  <view class="con">{{ item.lawItem.lawFlag == 0 ?'审核不通过':'审核通过'}}</view>
                </view>
                <view class="row" v-if="item.lawItem.lawFlag == 0">
                  <view class="title">审核意见:</view>
                  <view class="con">{{ item.lawItem.reason||"--"}}</view>
                </view>
                <view class="row">
                  <view class="title">审核时间:</view>
                  <view class="con">{{ item.lawItem.lawDate}}</view>
                </view>
                <view class="row">
                  <view class="title">审核人:</view>
                  <view class="con">{{item.lawItem.userName}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, toRefs, defineProps } from 'vue';
const props = defineProps({
  data: {
    type: Array,
    default:[],
    required:true
  },
  reverseFlag: {
    type: Boolean,
    default: true
  }
});
let retract=(index)=> {
  newData.value[index].show = !newData.value[index].show;
}
let newData = ref()
newData.value = props.data.map(obj => {
  return {
    ...obj, // 展开原始对象
    show: true // 添加新属性
  };
});
function initData() {
  if (props.reverseFlag) newData.value.reverse();
}
initData();
</script>

<style lang="scss" scoped>
//公用样式文件
@import "@/static/css/packageBase/smain.scss";
@import "@/static/css/packageBase/lmain.scss";
//日常检查样式
@import "@/static/css/dailycheck/dailycheck.scss";
@import "@/static/css/dailycheck/viewIndex.scss";

::v-deep .textAreaBox {
  position: relative;
}

.fontCount {
  position: absolute;
  bottom: 2px;
  right: 130rpx;
  color: #9e9e9e;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  z-index: 999;

  image {
    height: 50rpx;
    width: 50rpx;
  }
}

::v-deep .requireStarBottom {
  width: 23%;
  position: relative;
}

::v-deep .requireStarBottom:after {
  position: absolute;
  right: 0;
  vertical-align: bottom; //加上星号会上下居中，不加会在上角展示
  content: ' *';
  color: rgba(255, 59, 48, 1);
  font-size: 100%;
}

::v-deep.uv-textarea__field {
  text-align: left !important;
}

.rectification {
  display: flex;
  grid-gap: 20rpx;

  .rectification-item-action {
    width: 82rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: rgba(51, 117, 246, 0.698);
    border-radius: 2px;
    font-size: 24rpx;
  }

  .rectification-item {
    background: #cccccc;
    @extend .rectification-item-action;
  }
}

.popup-title-1 {
  height: 112rpx;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #e7e7e7;
  line-height: 112rpx;
  background: #ffffff;
}

.up-popup-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 360rpx;
  background: #f5f5f5;

  .select-one {
    height: 110rpx;
    background: #ffffff;
    margin-top: -140rpx;
    text-align: center;
    border-bottom: 1px solid #e7e7e7;
    line-height: 110rpx;
  }

  .select-two {
    height: 110rpx;
    line-height: 110rpx;
    background: #ffffff;
    text-align: center;
    border-bottom: 1px solid #e7e7e7;
  }

  .bottom-box {
    height: 110rpx;
    line-height: 110rpx;
    background: #ffffff;
    text-align: center;
  }
}

.check-all {
  display: flex;
  width: 110%;
  align-items: center;
}

.check-all-ri-label {
  color: #9e9e9e;
  font-size: 24rpx;
  width: 69%;
}

.zi-label {
  color: #9e9e9e;
  font-size: 24rpx;
}

.file-img {
  width: 140rpx;
  height: 140rpx;
  border-radius: 4px;
  margin-left: 10rpx;
}

.file-all {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 10rpx;
}

.delet-img {
  height: 32rpx;
  width: 32rpx;
  position: absolute;
  right: 0;
  top: 0;
}
</style>
